<h3>{{projectId}} 
    <button class="btn btn-sm btn-default" ng-hide="yml" ng-click="details()">details</button>
    <a class="btn btn-sm btn-default" ng-hide="yml" ng-href="#/create/{{projectId}}">clone</a>
    <a class="btn btn-sm btn-default" ng-hide="yml" ng-href="#/edit/{{projectId}}">edit</a>
</h3>

<div class="row" ng-show="yml">
  <div class="col-md-10 col-md-offset-1">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h3 class="panel-title">
            project details
            <button class="btn btn-xs btn-default" ng-show="yml" ng-click="yml = null">hide</button>
          </h3>
      </div>
      <div class="panel-body">
        <pre class="text-left yml">{{yml}}</pre>
        <hr>
        <pre class="text-left yml">{{env}}</pre>
        <hr>
        <pre class="text-left yml">{{config | json}}</pre>
        <div ng-if="readme">
          <hr>
          <markdown content="{{readme}}"></markdown>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-10 col-md-offset-1">
    <h1 ng-show="working">
      <span class="spinner glyphicon glyphicon-refresh"></span>
    </h1>
    <actions project-id="projectId" services="services" working="working" ng-hide="working"></actions>
  </div>
</div>

<br><br>

<div ng-hide="working">
  <h4>Services</h4>

  <div ng-repeat="(id, service) in services">
    <div class="row">
      <h5>
        {{id}}
        <button class="btn btn-xs btn-default" ng-click="scale(id)"><span class="glyphicon glyphicon-resize-full"></span> scale</button>
      </h5>
    </div>
    <div class="row service service-{{$index % 16}}">
      <div class="col-md-6" ng-class="{'col-md-offset-3': service.length === 1}"  ng-repeat="container in service">

        <div class="panel" ng-class="{'active': container.is_running, 'off': !container.is_running}">
          <div class="panel-heading">
            
            <span ng-class="{'text-muted': !container.is_running}">
              {{container.name_without_project}}
            </span>
            <br/>
            
            <div class="btn-group" role="group" >
				<button class="btn btn-xs btn-default" ng-click="displayLogs(container.name)">logs</button>
				<a class="btn btn-xs btn-default" ng-href="#/project/{{projectId}}/{{container.name}}">details</a>
				<button class="btn btn-xs btn-default" ng-click="rebuild(id)">rebuild</button>
			
				<div class="btn-group" role="group" ng-show="containerConsolePattern">
					<button class="btn btn-xs btn-default dropdown-toggle" type="button" id="shellSelector" data-toggle="dropdown">
						console <span class="caret"></span>
					</button>
					<ul class="dropdown-menu shell-selector-list">
						<li><a ng-click="openConsole(container.name, '/bin/bash')">/bin/bash</a></li>
						<li><a ng-click="openConsole(container.name, '/bin/sh')">/bin/sh</a></li>
					</ul>
				</div>
			</div>
            
          </div>
          <div class="panel-body">

            <h6 ng-hide="container.volumes.length === 0"><span class="glyphicon glyphicon glyphicon-hdd"></span> Volumes</h6>
            <ul class="list-unstyled">
              <li ng-repeat="volume in container.volumes">
                <div class="truncate" ng-attr-title="{{volume.source}} to {{volume.destination}}">
                  {{volume.source}} : {{volume.destination}}
                </div>
              </li>
            </ul>
            <span ng-show="container.is_running">
              <h6 ng-show="container.ports"><span class="glyphicon glyphicon glyphicon-transfer"></span> Network</h6>
              <p ng-repeat="(internal, host) in container.ports">
                <span ng-hide="host">{{internal}}</span>
                <span ng-repeat="mapping in host">
                  {{mapping.HostPort}} : {{internal}}
                </span>
              </p>
            </span>
            <span ng-hide="container.is_running">{{container.state}}</span>
          </div>
        </div><!-- /.panel -->

      </div> <!-- /.col -->
    </div><!-- /.row -->
  </div>
  <div modal-show="showDialog" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">{{containerLogs}} logs</h4>
        </div>
        <div class="modal-body">
          <pre class="text-left logs">{{logs.join("\n")}}</pre>
        </div>
        <div class="modal-footer">
          <button ng-click="displayLogs(containerLogs)" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span> refresh</button>
        </div>
      </div>
    </div>
  </div>
  
  <div console-modal-show="showConsoleDialog" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">{{containerName}} console</h4>
        </div>
        <div class="modal-body">
          <iframe ng-if="containerConsoleUrl" src="{{containerConsoleUrl}}" style="width: 810px; height: 460px; border: none;"></iframe>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
  
  <span ng-show="isEmpty(services)">no containers found</span>
</div>

<button class="btn btn-danger btn-delete-project" ng-click="deleteProject(projectId)"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> delete project</button>
